<template>
  <div class="shopping">
      <div v-for="(v, index) in list" :key="index" class="shop">
        <van-card
          class="shops"
          :num="v.count"
          price="2.00"
          :desc="v.phone"
          :title="v.name"
          :thumb="v.avaUrl"
          >
          <template #tags>
            <van-tag plain type="danger">明星</van-tag>
            <van-tag plain type="danger">歌手</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="jian(v)">-</van-button>
            <van-button size="mini" @click="jia(v)">+</van-button>
          </template>
        </van-card>
        <!-- <img :src="v.avaUrl" alt="" class="img"/>
        <div class="count">
          <p>{{ v.name }}</p>
          <p style="color:red">{{ v.phone }}</p> -->
          <!-- <button @click="jian(v)">-</button>
          <input type="text" v-model.number="v.count"  @change="change(v)" style="width:30px">
          <button @click="jia(v)">+</button> -->
          <!-- <van-button @click="jian(v)" round type="info" class="btn1 btn">—</van-button>
          <input type="text" v-model.number="v.count" @change="change(v.count)" class="input" style="width:30px">
          <van-button @click="jia(v)" round type="info" class="btn2 btn">+</van-button>
        </div> -->
        
      </div>
      <p>当前购物车的总数量是：{{getAllcount}}  件 </p>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
  name: "Shopping",
  data() {
    return {
     
    };
  },
  methods: {
      jian(v){
        if (v.count<=1) {
          MessageBox.confirm('确定要执行此操作').then(action=>{
            this.$store.commit("jian",v);
          }).catch(e=>{});
        }else{
          this.$store.commit("jian",v);
        }
      },
      jia(v){
        if(v.count >= 200){
          MessageBox.confirm('商品数量最多为200件').then(action=>{
            this.$store.commit("jia",v);
          }).catch(e=>{});
        }else{
          this.$store.commit("jia",v)
        }
      },
      change(v){
        this.$store.commit("change",v)
      }
  },
  computed: {
    list: {
      get(){
          return this.$store.state.list;
      },
      set(v){
          // this.$store.commit("change",v);
      }
    },
    getAllcount(){
      return this.$store.getters.allCount;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop{
  display: flex;
}
.shops{
  width: 100%;
}
.count{
  margin: auto;
}
img{
  width: 30%;
}
.shopping{
  margin-top: 45px;
  margin-bottom: 62px ;
  width: 100%;
  text-align: left;
}
.img{
  border-radius: 10px;
  margin-top: 5px;
}
.btn{
  border-radius: 100%;
  font-size: 30px;
  width: 22px;
  height: 32px;
  border: none;
}
.btn1{
  background-color:whitesmoke;
  color: red;
  font-size: 17px;
}
.btn2{
  background-color: red;
}
.input{
  border: none;
  text-align: center;
}
van-card{
  font-size: 16px;
  margin-left: 10px;
}
</style>
